<!DOCTYPE html>
<html>
<head>
	<title>pctx.html</title>
	<meta charset="utf-8"/>
	<script src="./bower_components/react/react.js"></script>
	<script src="./bower_components/react/react-dom.js"></script>
	<script src="./bower_components/babel/browser.js"></script>

	<style>
		

	</style>
</head>
<body>
	<div id='app'></div>

	<script type="text/babel">

		class Child extends React.Component {
			render() {
				return (
					<div style={{color: this.props.textColor}}>我是子组件</div>
				)
			}
		}

		class Parent extends React.Component{
			render() {
				return (
					<div>
						<div>我是父组件</div>
						<Child textColor="#ccc"/>
						<Child textColor="#ff0000"/>
						<Child textColor="#00ff00"/>
					</div>
				)
			}
		}
		
		ReactDOM.render(<Parent />, app);
	</script>

</body>
</html> 